<script setup lang="ts">
import { LPolyline } from "@vue-leaflet/vue-leaflet";
import { useMapStore } from "@/store";

const mapStore = useMapStore();
const { selectedMarkers } = storeToRefs(mapStore);

onUnmounted(() => {
  mapStore.clearSelectedMarkers();
});
watchEffect(() => {
  if (selectedMarkers.value.length === 2) {
    mapStore.setAddedPipeLines(
      selectedMarkers.value.map((item: any) => item.latlng)
    );
  }
});
</script>

<template>
  <LPolyline
    v-if="selectedMarkers.length > 1"
    :lat-lngs="selectedMarkers.map((item: any) => item.latlng)"
    color="purple"
    weight="4"
  />
</template>

<style scoped lang="scss"></style>
